<template>
    <!-- 销售漏斗 -->
  <div class="sales-funnel">
    <div class="head" style="border-bottom: 1px solid #ececec;padding-left: 20px;">
           <el-row style="line-height: 50px;font-weight: 700;">销售漏斗</el-row>
    </div>
    <div class="content" style="padding-top: 30px;">
      <el-row>
           <el-col :span="20">
          <Echarts :idName="'sales-funnel'" :isAxisChart="false" :echartsData="echartsData"></Echarts>
          </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Echarts from '../../components/echarts.vue'
export default {
  components: { Echarts },
data(){
    return {
     echartsData:{
        legendHide:true,
            series: [{
     name: '销售漏斗',
     type: 'funnel',
     left: '10%',
     top: 10,
     //x2: 80,
     bottom: 0,
     width: '100%',
     height: "80%",
    //  将min设为数据的最小值实现漏斗图的矩形
     min: 40,
    //  max: 100,
     minSize: '20%', //与漏斗形状有关
     maxSize: '70%', //与漏斗形状有关
     sort: 'descending',
     gap: 2,
     
     label: {
         show: true,
         position: 'inside',
         formatter: "{b}{c}--{d}%",
  
     },
     labelLine: {
         length: 10,
         lineStyle: {
             width: 1,
             type: 'solid'
         }
     },
     itemStyle: {
         borderColor: '#fff',
         borderWidth: 1
     },
     emphasis: {
         label: {
             fontSize: 20
         }
     },
     data: [
        {
             value: 60,
             name: '初步接洽',
         },
         {
             value: 40,
             name: '需求确定'
         },
         {
             value: 80,
             name: '方案/报价'
         },
         {
             value: 100,
             name: '谈判审核'
         },
         {
             value: 20,
             name: '赢单'
         },
     ]
     }]

        },

    }
}
}
</script>

<style scoped>
* {
    padding:0
}
</style>

